<!doctype html>
<html>
<head th:include="include/fore/foreHeader::html('首页')" ></head>

<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet prefetch" href="css/photoswipe.css">
<link rel="stylesheet prefetch" href="css/default-skin/default-skin.css">

<script src="js/photoswipe.js"></script>
<script src="js/photoswipe-ui-default.min.js"></script>
<script>
function goPAGE() {
	if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
	}
	else{
		window.location.href="homepage";
	}
}
goPAGE();

var JPos = {};
(function($){
	$.$getAbsPos = function(p){
		var _x = 0;
		var _y = 0;
		while(p.offsetParent){
				_x += p.offsetLeft;
				_y += p.offsetTop;
				p = p.offsetParent;
		}
		
		_x += p.offsetLeft;
		_y += p.offsetTop;
		
		return {x:_x,y:_y};
	};
	
	$.$getMousePos = function(evt){
		var _x,_y;
		evt = evt || window.event;
		if(evt.pageX || evt.pageY){
			_x = evt.pageX;
			_y = evt.pageY;
		}else if(evt.clientX || evt.clientY){
			_x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
			_y = evt.clientY + document.body.scrollTop - document.body.clientTop;
		}else{
			return $.$getAbsPos(evt.target);	
		}
		return {x:_x,y:_y};
	}
})(JPos);
$(function(){
	function captureImage(e){
		video = e.currentTarget;
		var vid = $(video).attr("vid");
		output = $(".output[vid="+vid+"]")[0];
		var canvas = document.createElement("canvas");
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
	        var img = document.createElement("img");
	    img.src = "dist/img/ico_play.png";
	    var imageData= canvas.toDataURL("image/png");
	    imageData = "url("  + imageData + ")";
	    $(output).css("background-image",imageData);
	    $(output).width("100px");
	    $(output).height("100px");
	};   

	function getPercentage(bigImage){
		var mPos = JPos.$getMousePos();
		var iPos = JPos.$getAbsPos(bigImage);
		
		window.status = (mPos.x - iPos.x) + " " + (mPos.y - iPos.y);
		var x = (mPos.x - iPos.x);
		var width = $(bigImage).width();
		
		var percentage = 0;
		
		percentage = x*100/width;			
		return percentage;
	}
	function addEventListener(){
		$(".homepage-picture-big").mousemove(function(e){
    			var index=$(this).attr("index");
    			var total=$(this).attr("total");
			
    			var percentage = getPercentage(this);
				
				if(percentage<25){
					if(0==index)
						$(this).css("cursor","url('dist/img/small.cur'),auto");
					else
						$(this).css("cursor","url('dist/img/pic_prev.cur'),auto");
				}
				else if(percentage<75){
					$(this).css("cursor","url('dist/img/small.cur'),auto");
				}
				else{
					if(index==total-1)
						$(this).css("cursor","url('dist/img/small.cur'),auto");
					else
    					$(this).css("cursor","url('dist/img/pic_next.cur'),auto");   					
				}
		});

		function showAll(){
			$("div.eachPost").children("div").show();
			$("div.pageDiv").show();    			
		}
		function hideAll(){
			$("div.eachPost").children("div").hide();
			$("div.pageDiv").hide();    			
		}
		$(".homepage-picture-big").click(function(){
			var index=$(this).attr("index");
			index = new Number(index);
			var total=$(this).attr("total");
			var pid=$(this).attr("pid");
			
			var percentage = getPercentage(this);
			
			if(percentage<25){
				console.log(index);
				if(0==index){
					$(this).fadeOut(0);
					showAll();
				}
				else{
					var img = $(".homepage4mobile-picture-small[pid="+pid+"][index="+(index-1)+"]");
					var middleSrc = img.attr("middleSrc");
					$(this).attr("src",middleSrc);
					$(this).attr("index",index-1);
				}
			}
			else if(percentage<75){
				$(this).fadeOut(0);
				showAll();
			}
			else{
				if(index==total-1){
					$(this).fadeOut(0);
					showAll();						
				}
				else{
					console.log(".homepage4mobile-picture-small[pid="+pid+"][index="+(index+1)+"]");
					var img = $(".homepage4mobile-picture-small[pid="+pid+"][index="+(index+1)+"]");
					var middleSrc = img.attr("middleSrc");
					$(this).attr("src",middleSrc);
					$(this).attr("index",index+1);
				}
			}
		});
		$(".homepage4mobile-picture-small").click(function(){
			hideAll();
			
			var middleSrc=$(this).attr("middleSrc");
			var pid=$(this).attr("pid");
			var index=$(this).attr("index");
			var total=$(this).attr("total");
			
			var imageBig=$(".homepage-picture-big[pid="+pid+"]");
			var imageSmalls=$(".homepage4mobile-picture-small[pid="+pid+"]");
			
			imageSmalls.removeClass("selectedImage");
			
			$(this).addClass("selectedImage");
			
			imageBig.attr("src",middleSrc);
			imageBig.attr("index",index);
			imageBig.attr("total",total);
			imageBig.fadeIn(500);
			imageBig.parent("div").show();
		});
		
   		$("video").click(function(){
   		    if(this.paused){
   		        this.play();
   		    }else{
   		        this.pause();
   		    }      
   		});	
   		
    	$(".small_video").each(function(){
    		$(this).on("loadeddata",captureImage);
    	});

    	
   	    $("#modal-info").on("hidden.bs.modal",function(){
   	    	$(".videoOnFront")[0].pause();
   	    });
   	    $("#modal-info").on("show.bs.modal",function(){
       	 	if (screenfull.enabled) {
       			screenfull.request($(".videoOnFront")[0]);
       		}
   	    	$(".videoOnFront")[0].play();
   	    });
   	    
   	    $(".small_image").each(function(){
   	    	var width = $(this).width();
   	    	$(this).height(width);
   	    });
   	    
   		var initPhotoSwipeFromDOM = function(gallerySelector) {

   		    // 解析来自DOM元素幻灯片数据（URL，标题，大小...）
   		    // (children of gallerySelector)
   		    var parseThumbnailElements = function(el) {
   		        var thumbElements = el.childNodes,
   		            numNodes = thumbElements.length,
   		            items = [],
   		            figureEl,
   		            linkEl,
   		            size,
   		            item,
   					divEl;

   		        for(var i = 0; i < numNodes; i++) {

   		            figureEl = thumbElements[i]; // <figure> element

   		            // 仅包括元素节点
   		            if(figureEl.nodeType !== 1) {
   		                continue;
   		            }
   					divEl = figureEl.children[0];
   		            linkEl = divEl.children[0]; // <a> element
   					
   		            size = linkEl.getAttribute('data-size').split('x');

   		            // 创建幻灯片对象
   		            item = {
   		                src: linkEl.getAttribute('href'),
   		                w: parseInt(size[0], 10),
   		                h: parseInt(size[1], 10)
   		            };



   		            if(figureEl.children.length > 1) {
   		                // <figcaption> content
   		                item.title = figureEl.children[1].innerHTML; 
   		            }

   		            if(linkEl.children.length > 0) {
   		                // <img> 缩略图节点, 检索缩略图网址
   		                item.msrc = linkEl.children[0].getAttribute('src');
   		            } 

   		            item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
   		            items.push(item);
   		        }

   		        return items;
   		    };

   		    // 查找最近的父节点
   		    var closest = function closest(el, fn) {
   		        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
   		    };

   		    // 当用户点击缩略图触发
   		    var onThumbnailsClick = function(e) {
   		        e = e || window.event;
   		        e.preventDefault ? e.preventDefault() : e.returnValue = false;

   		        var eTarget = e.target || e.srcElement;

   		        // find root element of slide
   		        var clickedListItem = closest(eTarget, function(el) {
   		            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
   		        });

   		        if(!clickedListItem) {
   		            return;
   		        }

   		        // find index of clicked item by looping through all child nodes
   		        // alternatively, you may define index via data- attribute
   		        var clickedGallery = clickedListItem.parentNode,
   		            childNodes = clickedListItem.parentNode.childNodes,
   		            numChildNodes = childNodes.length,
   		            nodeIndex = 0,
   		            index;

   		        for (var i = 0; i < numChildNodes; i++) {
   		            if(childNodes[i].nodeType !== 1) { 
   		                continue; 
   		            }

   		            if(childNodes[i] === clickedListItem) {
   		                index = nodeIndex;
   		                break;
   		            }
   		            nodeIndex++;
   		        }



   		        if(index >= 0) {
   		            // open PhotoSwipe if valid index found
   		            openPhotoSwipe( index, clickedGallery );
   		        }
   		        return false;
   		    };

   		    // parse picture index and gallery index from URL (#&pid=1&gid=2)
   		    var photoswipeParseHash = function() {
   		        var hash = window.location.hash.substring(1),
   		        params = {};

   		        if(hash.length < 5) {
   		            return params;
   		        }

   		        var vars = hash.split('&');
   		        for (var i = 0; i < vars.length; i++) {
   		            if(!vars[i]) {
   		                continue;
   		            }
   		            var pair = vars[i].split('=');  
   		            if(pair.length < 2) {
   		                continue;
   		            }           
   		            params[pair[0]] = pair[1];
   		        }

   		        if(params.gid) {
   		            params.gid = parseInt(params.gid, 10);
   		        }

   		        return params;
   		    };

   		    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
   		        var pswpElement = document.querySelectorAll('.pswp')[0],
   		            gallery,
   		            options,
   		            items;

   		        items = parseThumbnailElements(galleryElement);

   		        // 这里可以定义参数
   		        options = {
   		          barsSize: { 
   		            top: 100,
   		            bottom: 100
   		          }, 
   				   fullscreenEl : true,
//    					shareButtons: [
//    					{id:'wechat', label:'分享微信', url:'#'},
//    					{id:'weibo', label:'新浪微博', url:'#'},
//    					{id:'download', label:'保存图片', url:'{{raw_image_url}}', download:true}
//    					],

   		            // define gallery index (for URL)
   		            galleryUID: galleryElement.getAttribute('data-pswp-uid'),

   		            getThumbBoundsFn: function(index) {
   		                // See Options -> getThumbBoundsFn section of documentation for more info
   		                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
   		                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
   		                    rect = thumbnail.getBoundingClientRect(); 

   		                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
   		            }

   		        };

   		        // PhotoSwipe opened from URL
   		        if(fromURL) {
   		            if(options.galleryPIDs) {
   		                // parse real index when custom PIDs are used 
   		                for(var j = 0; j < items.length; j++) {
   		                    if(items[j].pid == index) {
   		                        options.index = j;
   		                        break;
   		                    }
   		                }
   		            } else {
   		                // in URL indexes start from 1
   		                options.index = parseInt(index, 10) - 1;
   		            }
   		        } else {
   		            options.index = parseInt(index, 10);
   		        }

   		        // exit if index not found
   		        if( isNaN(options.index) ) {
   		            return;
   		        }

   		        if(disableAnimation) {
   		            options.showAnimationDuration = 0;
   		        }

   		        // Pass data to PhotoSwipe and initialize it
   		        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
   		        gallery.init();
   		    };

   		    // loop through all gallery elements and bind events
   		    var galleryElements = document.querySelectorAll( gallerySelector );

   		    for(var i = 0, l = galleryElements.length; i < l; i++) {
   		        galleryElements[i].setAttribute('data-pswp-uid', i+1);
   		        galleryElements[i].onclick = onThumbnailsClick;
   		    }

   		    // Parse URL and open gallery if it contains #&pid=3&gid=1
   		    var hashData = photoswipeParseHash();
   		    if(hashData.pid && hashData.gid) {
   		        openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
   		    }
   			};

   			// execute above function
   			initPhotoSwipeFromDOM('.my-gallery');

   			
   			$(".my-gallery>figure>div").each(function(){
   				$(this).height($(this).width());
   			});
   			function more(obj,id) {
   		 		if ($('#txt'+id).is(":hidden")) {
   		 			$('#p'+id).hide();
   		 	 		$('#txt'+id).show();
   		 	 		obj.innerHTML='收起';
   		 		} else {
   		 			$('#p'+id).show();
   		 	 		$('#txt'+id).hide();
   		 	 		obj.innerHTML='全文';
   		 		}
   		 	}   	    
	}
	
    var data4Vue = {
            uri:'homepageData',
            beans: [],
            pagination:{},
            file: null
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list(0);
            },
            methods: {
                list:function(start){
                    var url =  this.uri+ "?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content;
                        
                        vue.$nextTick(function(){
                        	addEventListener();
                        });
                    });
                },
                show: function (id) {
                	var value = 'uploaded/video/'+id+'.mp4';
					$("#originalVideo").attr("src",value);
					console.log($("#originalVideo").attr("src"));
                },
                jump: function(page){
                    jump(page,vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function(start){
                    jumpByNumber(start,vue);
                }
            }
        });    	

        
        
});


</script>

<button id="btn">Open PhotoSwipe</button>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element, as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <div class="pswp__container">
            <!-- don't modify these 3 pswp__item elements, data is added later on -->
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

          </div>

        </div>

</div>

<script>

var openPhotoSwipe = function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    var items = [
        {
            src: 'uploaded/middlePicture/48.jpg',
            w: 964,
            h: 1024
        },
        {
            src: 'uploaded/middlePicture/45.jpg',
            w: 1024,
            h: 683
        }
    ];
    
    // define options (if needed)
    var options = {
			 // history & focus options are disabled on CodePen        
      	history: false,
      	focus: false,

        showAnimationDuration: 0,
        hideAnimationDuration: 0
        
    };
    
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};

openPhotoSwipe();

document.getElementById('btn').onclick = openPhotoSwipe;
</script>
</html>
